New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
7 participants
@hteumeuleu
Owner

hteumeuleu commented Jun 3, 2016

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

This comment has been minimized.

Show comment
Hide comment
@teresapayne

teresapayne Jun 10, 2016

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.

teresapayne commented Jun 10, 2016

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

This comment has been minimized.

Show comment
Hide comment
@lcjf

lcjf 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.

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

This comment has been minimized.

Show comment
Hide comment
@danebest

danebest Jun 24, 2016

"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!

danebest commented Jun 24, 2016

"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

This comment has been minimized.

Show comment
Hide comment
@revelt

revelt Jul 29, 2016

The following doesn't work:

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

source

revelt commented Jul 29, 2016

The following doesn't work:

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

source

@revelt

This comment has been minimized.

Show comment
Hide comment
@revelt

revelt 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]?

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]?

@hteumeuleu

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Jul 5, 2017

Owner

I just had this bug again. The solution suggested by @danebest to add overflow:visible!importantat the end of my style worked for me for IE11. Adding ms-overflow:visible!important; is not necessary as it's filtered by Yahoo.

On a side note, this bug not longer seems to be present on the new Yahoo webmail UI.

Owner

hteumeuleu commented Jul 5, 2017

I just had this bug again. The solution suggested by @danebest to add overflow:visible!importantat the end of my style worked for me for IE11. Adding ms-overflow:visible!important; is not necessary as it's filtered by Yahoo.

On a side note, this bug not longer seems to be present on the new Yahoo webmail UI.

@azzwho

This comment has been minimized.

Show comment
Hide comment
@azzwho

azzwho Nov 16, 2017

ms-overflow:visible!important; this is not working in yahoo| IE11 . how do i get exact solution

azzwho commented Nov 16, 2017

ms-overflow:visible!important; this is not working in yahoo| IE11 . how do i get exact solution

@revelt

This comment has been minimized.

Show comment
Hide comment
@revelt

revelt Nov 16, 2017

Yahoo on what browser exactly? I can't nail it on IE but my Crome/FF look fine.
Quick tip, check all the chain of tags up to the topmost, maybe it's parent tags or combo of them.
I remember I had to sprinkle the attribute everywhere.

revelt commented Nov 16, 2017

Yahoo on what browser exactly? I can't nail it on IE but my Crome/FF look fine.
Quick tip, check all the chain of tags up to the topmost, maybe it's parent tags or combo of them.
I remember I had to sprinkle the attribute everywhere.

@azzwho

This comment has been minimized.

Show comment
Hide comment
@azzwho

azzwho Nov 18, 2017

azzwho commented Nov 18, 2017

@mgoggin

This comment has been minimized.

Show comment
Hide comment
@mgoggin

mgoggin Dec 4, 2017

I was bitten by this bug this last week while designing a new email campaign. Using overflow:visible!important;-ms-overflow:visible!important immediately following max-width fixed the issue in Yahoo on IE 10 and IE 11.

mgoggin commented Dec 4, 2017

I was bitten by this bug this last week while designing a new email campaign. Using overflow:visible!important;-ms-overflow:visible!important immediately following max-width fixed the issue in Yahoo on IE 10 and IE 11.

@revelt

This comment has been minimized.

Show comment
Hide comment
@revelt

revelt Dec 5, 2017

Ha! Apparently I didn't put the hyphen in front of my ms-overflow and that's why it didn't work... Thanks @mgoggin for sharing the snippet! It's such a face-palm case.. :)

revelt commented Dec 5, 2017

Ha! Apparently I didn't put the hyphen in front of my ms-overflow and that's why it didn't work... Thanks @mgoggin for sharing the snippet! It's such a face-palm case.. :)

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