Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Why is Yahoo adding scroll bars to everything in email testing now?

hoseasons

Newbie
Total Posts:  7
Posted: 08 June 2016 05:23 AM

Has there been a new Yahoo update? I’m using a fluid modular template that has been fine for weeks but now yahoo mail adds scrollbars to individual columns, blocks etc.
Has anyone else seen this and found a way around it??

thanks

Image Attachments
Untitled-1.jpg

 

Alex Ilhan

Avatar
Administrator
Total Posts:  217
Posted: 08 June 2016 05:48 AM
[ # 1 ]

Hey hoseasons,

Yahoo have indeed updated their email systems, the current theory is changes to their website in general are bleeding through into email generation.

I can take a look at your code, see if I can help you remove the scroll bars?

If you could post your email as an HTML attachment that’d be super helpful smile

Cheers
Alex


 

hoseasons

Newbie
Total Posts:  7
Posted: 08 June 2016 06:05 AM
[ # 2 ]

Thanks Alex, here’s an email example using a fluid template, it seems to be adding them to the 2 column section, I’ve got them off the icons but not sure how. On other emails it’s adding a scrollbar to the whole email as well as the sections, could you let me know if possible how i can solve it/where i’ve gone wrong?

thanks in advance for your help!

File Attachments
EOA test.html  (File Size: 105KB - Downloads: 596)

 

Alex Ilhan

Avatar
Administrator
Total Posts:  217
Posted: 08 June 2016 08:07 AM
[ # 3 ]

Hey hoseasons,

After investigating this, I’ve figured out it is the recent Yahoo update that’s causing this.

Any places where you have a max-width code declaration Yahoo is automatically adding in overflow-x:auto; into emails. What this means is that it’s telling the browser there’s an overflow, and to add a scrollbar.

Luckily, the way to fix this is super simple!

Anywhere in your HTML code that you have a max-width you should follow it immediately with overflow:visible;.

So, for example with an actual snippet from your email your code goes from:

<div class="column" style="width:100%;max-width:320px;display:inline-block;vertical-align:middle;"

To this:

<div class="column" style="width:100%;max-width:320px;overflow:visible;display:inline-block;vertical-align:middle;"


I hope this helps, if you need anything else explained or more help please don’t hesitate to reach out.

Cheers,
Alex


 

hoseasons

Newbie
Total Posts:  7
Posted: 08 June 2016 09:29 AM
[ # 4 ]

Hi Alex,

I attached overflow:visible to the template wherever there was a max-width declaration I only had a min-width declaration in the body tag), but it still comes up with scroll bars when i test in yahoo on IE etc, is there something else I need to do with this? Here’s a simplified version attached with only a couple of sections to make viewing a bit easier

thanks

File Attachments
EOA test2.html  (File Size: 53KB - Downloads: 536)

 

Todd

Newbie
Total Posts:  1
Posted: 13 July 2016 12:54 PM
[ # 5 ]

In IE, Yahoo is also adding -ms-overflow-x:auto; -ms-overflow-y:auto; in addition. Any ideas on how to override this?


 

saintleo

Newbie
Total Posts:  7
Posted: 08 September 2016 02:04 PM
[ # 6 ]

Any answers on how to fix this yet in IE? The overflow:visible works perfectly in everything else (thanks for that Alex!), but not in IE…just when you think you have a template working, right?


 

Alex Ilhan

Avatar
Administrator
Total Posts:  217
Posted: 09 September 2016 05:21 AM
[ # 7 ]

Hey everyone,

After investigating this further, I’ve managed to find a solution.

In the head of your email, simply add this:

tabletd {
overflow
hidden !important;

If you already have a table and td in your head, simply appendage overflow: hidden !important; to it.

Let me know how you all get on!

Alex


 

saintleo

Newbie
Total Posts:  7
Posted: 09 September 2016 07:04 AM
[ # 8 ]

Hi Alex,

Unfortunately, this didn’t fix it for me. I’m using a template I built off of Nicole Merlin’s fluid-hybrid tutorial if that makes a difference: http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries—cms-23919

I added overflow: hidden !important; to the table and td in the Basics area of the code (I inline my styles before testing):

table {
  border-spacing: 0;
  font-family: sans-serif;
  color: #333333;
  overflow: hidden !important;
}
td {
  padding: 0;
  overflow: hidden !important;
}

I had added overflow: visible to my left sidebar CSS yesterday to solve the scroll bar issue in the other browsers (the left sidebar is where my images with the scrollbars live):

.left-sidebar .left {
  max-width: 120px;
  overflow:visible;
}

I tried removing the overflow: visible and testing with the new overflow table property in case there was a conflict, but the scroll bars are still there.

Any idea as to how I might be able to make your solution work here? Thanks!


 

JoeeWalton

Newbie
Total Posts:  6
Posted: 25 October 2016 05:26 AM
[ # 9 ]

I’m experiencing the same issues, also with a hybrid-flexi template. I’d love to know if anyone gets to the bottom of this.


 

anna79

Newbie
Total Posts:  3
Posted: 15 December 2016 03:23 AM
[ # 10 ]

 

saintleo

Newbie
Total Posts:  7
Posted: 02 January 2017 02:25 PM
[ # 11 ]

I just had this issue come up again in one of my emails, but seems like I found a posted solution to it this time, so I wanted to go ahead and post it here:

https://litmus.com/community/discussions/5431-fix-for-max-height-overflow-y-in-yahoo-mail

Basically, you just place this in your header, between the <style> tags like so:
<style>
@media screen yahoo {
  * {
  overflow: visible!important
  }
  .y-overflow-hidden {
  overflow: hidden!important
  }
}
</style>

After I inlined my CSS and tested through my EoA account, the scrollbars were gone! Hope that helps!


 

bleacherbum54

Newbie
Total Posts:  5
Posted: 02 February 2017 10:26 AM
[ # 12 ]

I am having this issue with Yahoo adding scroll bars below an image in a 2 column layout, even after trying to add “overflow:visible;” following the “max-width”. I also tried adding:

@media screen yahoo {
         * {
             overflow: visible!important
         }
         .y-overflow-hidden {
             overflow: hidden!important
         }

Any clue on how to remove the scroll bars from an image?


 

spodrock

Newbie
Total Posts:  1
Posted: 09 June 2017 04:08 AM
[ # 13 ]

I’ve been having similar issues in the last few days whilst playing around with some hybrid ideas - it’s a bit annoying having to look for a specific solution to fix one browser/client combination but i’d be interested in other people trying this out:

div {
overflow:visible!important;
-ms-overflow-style:-ms-autohiding-scrollbar;
}

I’m currently only using max-width on divs, but it seems to be working smile

EDIT: ok, I obviously spoke too soon, Litmus is being rather intermittent in letting me test Yahoo/IE, and after having one render that looked fine it now has scrollbars again…