Yahoo adds overflow-x/y:auto when using max-width/height #17

Open
hteumeuleu opened this Issue Jun 3, 2016 · 5 comments

Projects

None yet

5 participants

@hteumeuleu
Owner

Yahoo's desktop webmail seems to add the CSS property overflow-x:auto; when it sees the property max-width inline, and overflow-y:auto; when it sees the property max-height.

For example, the following code…

<div style="max-width:50px; max-height:50px;>Lorem ipsum</div>

… will be transformed by Yahoo into :

<div style="overflow-x:auto;max-width:50px;overflow-y:auto;max-height:50px;">Lorem ipsum</div>

A fix consists of adding an overflow:visible property. So the following code…

<div style="max-width:50px; max-height:50px; overflow:visible;>Lorem ipsum</div>

… will be transformed by Yahoo into :

<div style="overflow-x:auto;max-width:50px;overflow-y:auto;max-height:50px;overflow:visible;">Lorem ipsum</div>

However, this won't work on Internet Explorer because Yahoo also adds -ms- prefixed versions of the overflow- properties. So the latest example becomes on Internet Explorer :

<div style="overflow:visible; -ms-overflow-x:auto; -ms-overflow-y:auto; max-height:50px; max-width:50px;">Lorem ipsum</div>
@hteumeuleu hteumeuleu added the bug label Jun 3, 2016
@teresapayne

Has anyone found a fix to the -ms-overflow-x:auto styling? Yahoo in IE.
I've been able to find fixes for everything but that.

@lcjf
lcjf commented Jun 15, 2016

I haven't found a "fix" (I tried camel casing, and alternating lower/uppcase etc.), but in my case, I put the max width values within my 'max-width' media query. I discovered that I only needed to apply the max width values for the responsive version of my template.

If you can't do this then an alternative approach may be to set those values on the parent td, if that isn't possible then maybe replace your div with a table.

@danebest

"overflow:visible!important;ms-overflow:visible!important;" immediately after your max-width, width, max-height, or height will fix the issue for Yahoo! webmail in IE. That said, the issue may be caused from competing widths or heights, which when cleaned up will avoid the issue altogether.

Cheers!

@revelt
revelt commented Jul 29, 2016 edited

The following doesn't work:

  -ms-overflow-style: -ms-autohiding-scrollbar;

source

@revelt
revelt commented Jul 29, 2016
ms-overflow:visible!important;

@danebest your proposed ms-overflow doesn't work on both IE11/Edge+Yahoo webmail. I don't think such CSS style even exists; should it be -ms-overflow-style [source]?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment