[wp-trac] [WordPress Trac] #42052: Customize Themes: themes browser header not visible in Safari 11

[WordPress Trac]

#42052: Customize Themes: themes browser header not visible in Safari 11
---------------------------------------+----------------------------
 Reporter:  afercia                    |       Owner:  benoitchantre
     Type:  defect (bug)               |      Status:  reviewing
 Priority:  normal                     |   Milestone:  4.9
Component:  Customize                  |     Version:  trunk
 Severity:  normal                     |  Resolution:
 Keywords:  has-screenshots has-patch  |     Focuses:
---------------------------------------+----------------------------

Comment (by afercia):

 About the details modal being clipped in Safari:
 The only reference I was able to find that could partially explain the
 Safari behavior is in the W3C CSS basic box model working draft (outdated
 but still referenced by the [https://www.w3.org/TR/css-
 overflow-3/#informative CSS Overflow Module Level 3])

 https://www.w3.org/TR/css3-box/#overflow
 > The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as
 their specified values, except that some combinations with ‘visible’ are
 not possible: if one is specified as ‘visible’ and the other is ‘scroll’
 or ‘auto’, then ‘visible’ is set to ‘auto’.

 This probably opened the doors to different implementations across
 browsers.

 Long story short, [attachment:42052.4.diff] sets back the themes container
 `overflow-y` to `visible` when the details modal is open, making the modal
 fully visible in Safari:

 [[Image(https://cldup.com/jBAycrYUav.jpg)]]

 The only drawback I've noticed, is that the themes list behind the modal
 will scroll to the top when the modal opens, and scroll back down when the
 modal closes. Worth noting this already happens in Chrome and Firefox
 without the patch applied.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/42052#comment:23>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform