blog.cloudflare.com - Items are overlapped #48332

fede3mmanuel · 2020-02-15T14:30:57Z

URL: https://blog.cloudflare.com/serverlist-8th-edition/

Browser / Version: Firefox 74.0
Operating System: Windows 10
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items are overlapped
Steps to Reproduce:
Down form the part that says " Received this email from a friend? Sign up here. ", There were sections (posts) that overlap the text with the images

View the screenshot

Browser Configuration

None

From webcompat.com with ❤️

softvision-sergiulogigan · 2020-02-17T09:58:59Z

Thanks for the report!
I'm able to reproduce the issue.

Tested with:
Browser / Version: Firefox Nightly 75.0a1 (2020-02-16)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis.

karlcow · 2020-02-17T22:17:48Z

Safari top, firefox middle, chrome bottom

Let's have fun.

karlcow · 2020-02-17T22:28:46Z

this is coming from an iframe with a huge escaped srcdoc with the rest of the document, which is a big set of… nested tables from the 90s. :)

<iframe id="magic"
        style="visbility: hidden;"
        seamless=""
        scrolling="no"
        srcdoc="

">

It upsets all 3 browsers devtools.

Chrome seems to recover the best here for this specific layout.
@emilio do you have an opinion?

also @digitarald for the performance impact on devtools.

I'm pushing this to to needscontact with a… change the way you do the design? That seems a bit tortured for such a simple page.

digitarald · 2020-02-18T04:59:32Z

@karlcow could you file an issue with a performance profile – not sure what issue I should see when inspecting the site.

karlcow · 2020-02-18T05:32:39Z

@digitarald

done already ;) this morning.
https://bugzilla.mozilla.org/show_bug.cgi?id=1616139

emilio · 2020-02-19T10:18:58Z

This seems a somewhat weird interaction between flex and table layout.

Firefox seems to be honoring the width: 100% that is in the following rule (inside a media query):

.tableStack {
    width: 100% !important;
}

Here's a reduced test-case:

<!doctype html>
<table style="border-collapse: collapse; width: 100%; margin: 0 auto">
  <td style="display: flex; align-items: center; width: 90%; padding: 10px 5%">
    <table style="border-collapse: collapse; width: 100%">
      <td style="text-align: center">
        <img width=200 height=200 style="margin: 0 auto">
      </td>
    </table>
    <table style="border-collapse: collapse; width: 100%">
      <td style="text-align: center">
        Some text here.
      </td>
    </table>
  </td>
</table>

It's not clear to me what's the correct behavior per spec... cc @atotic / @cbiesinger / @FremyCompany, in case you know what is going on with Chromium there... off-hand I don't know why the width: 100% in the <table>s should be treated specially.

emilio · 2020-02-19T10:20:15Z

@karlcow we should probably contact the site to remove that rule in particular. It seems the intention is to force the image and the content to be in different lines, but clearly no browser is doing that (maybe EdgeHTML used to?).

FremyCompany · 2020-02-19T16:34:11Z

Probably this:
https://bugzilla.mozilla.org/show_bug.cgi?id=1456224

atotic · 2020-02-19T18:36:22Z

Lots going on in that testcase. Here is a simpler one:

<div style="display:flex;width: 100%;">
  <div id=d1 style="background:yellow;width:100%">
    <img width=200 height=200 style="margin: 0 auto">
  </div>
  <table id=t1 style="background:blue;width:100%">
    <td>table</td>
  </table>
</div>

The difference between Chrome and FF is how percentage width is resolved for TABLE flex item. I think Chrome is correct here. In FF, The div#d1 resolves its %ge against flex item size, table#t1 resolves percentage against flex container size.

As I have been rewriting tables for Chrome, there is another table sizing inside flexbox issue I've encountered. It it about table's minmax size inside flexbox. Following table per spec has an infinite max size.

<table>
  <td style="width:10px">10</td>
  <td style="width:100%">100%</td>
</table>

Chrome currently does a wacky thing to avoid this, and ignores percentage cells when calculating minmax inside Flexbox.

The NG rewrite will bring Chrome's tables a lot closer to what FF is shipping. There are still some issues like the one above I'd like to align on. It be useful to have a f2f.

emilio · 2020-02-19T20:18:22Z

cc @dholbert

karlcow · 2020-02-19T22:17:43Z

This fixes the design.

/* Inline #-1 | https://blog.cloudflare.com/serverlist-8th-edition/ */

@media only screen and (max-width: 650px) {
		.tableStack {
				/* width: 100% !important; */
		}
}

karlcow · 2020-02-19T22:22:33Z

@samjbmason or @mrmrs could you help us find the right person at cloudflare who can solve this issue in the layout of the cloudflare blog? That would be great. Thanks. See the details and screenshots in this thread.

karlcow · 2020-02-28T05:01:18Z

maybe more chances with @sssilver
There's a simple css issue to solve on cloudflare blog. it would be cool if you could help us find the right person who can change the css so firefox users can enjoy a better website. Suggestion given in the issue here.

sssilver · 2020-02-28T12:51:01Z

Hi @karlcow! I'll be happy to help. Let me see what I can do and get back.

zackbloom · 2020-02-28T18:25:32Z

Hello! I work on the blog at Cloudflare. We will do our very best to get this fixed in the next release. Thank you for bringing it to our attention.

zackbloom · 2020-02-28T18:34:06Z

This is actually much more gnarly than I realized. That iframe is the output of an email which is designed using Marketo's email generation UI. We can use a Cloudflare Worker to remove that bit of CSS, but the real solution would be to have them change the way they generate CSS. Unfortunately the way they write that CSS is likely to maintain compatibility with email clients which will make all of this rather complicated.

karlcow · 2020-03-02T04:42:52Z

So i can see a couple things that could be done.

@dholbert what do you think about https://bugzilla.mozilla.org/show_bug.cgi?id=1456224 and its solvability? specifically in the light of @atotic comment above.
@zackbloom thanks for finding the culprit. Maybe we can try to contact Marketo so they slightly modify their css, but that might break a lot more stuff for them. So maybe not a wise choice.

There's another issue with the current design. the full text is not readable. It's not only the overlapping.

And if i do this in the cloudflare css, the issue is solved but only for large screens.

/* cloudflare.min.css | https://blog.cloudflare.com/assets/built/cloudflare.min.css?v=643ed3434b */

@media screen and (min-width: 60em) {
		.measure-wide-l {
				/* max-width: 34em; */
		}
}

.measure-wide-tablet {
		/* width: 34em; */
		width: 37em;
}

The problem comes back on tablet layout.

Note also that the text is currently fully unreadable on Safari. (edit: fixing firefox will not solve safari issue)

softvision-oana-arbuzov · 2021-06-02T14:30:02Z

The issue has been fixed. The layout is displayed correctly now both on Firefox and Safari.

Tested with:
Browser / Version: Firefox Nightly 91.0a1 (2021-06-01) , Safari 14.1 (16611.1.21.161.6)
Operating System: Windows 10 Pro, MacOS 11.3.1

fede3mmanuel · 2021-06-09T19:49:50Z

Thanks for all :)

webcompat-bot added this to the needstriage milestone Feb 15, 2020

webcompat-bot added browser-firefox engine-gecko The browser uses the Gecko rendering engine form-v2-experiment priority-important labels Feb 15, 2020

softvision-sergiulogigan changed the title ~~blog.cloudflare.com - design is broken~~ blog.cloudflare.com - Items are overlapped Feb 17, 2020

softvision-sergiulogigan added the severity-minor The site has a cosmetic issue. label Feb 17, 2020

softvision-sergiulogigan modified the milestones: needstriage, needsdiagnosis Feb 17, 2020

webcompat-bot modified the milestones: needsdiagnosis, needscontact Feb 17, 2020

karlcow modified the milestones: needscontact, sitewait Feb 19, 2020

softvision-oana-arbuzov closed this as completed Jun 2, 2021

softvision-oana-arbuzov modified the milestones: sitewait, fixed Jun 2, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

blog.cloudflare.com - Items are overlapped #48332

blog.cloudflare.com - Items are overlapped #48332

fede3mmanuel commented Feb 15, 2020

softvision-sergiulogigan commented Feb 17, 2020

karlcow commented Feb 17, 2020

karlcow commented Feb 17, 2020

digitarald commented Feb 18, 2020

karlcow commented Feb 18, 2020

emilio commented Feb 19, 2020

emilio commented Feb 19, 2020

FremyCompany commented Feb 19, 2020

atotic commented Feb 19, 2020

emilio commented Feb 19, 2020

karlcow commented Feb 19, 2020

karlcow commented Feb 19, 2020

karlcow commented Feb 28, 2020

sssilver commented Feb 28, 2020

zackbloom commented Feb 28, 2020

zackbloom commented Feb 28, 2020 •

edited

Loading

karlcow commented Mar 2, 2020 •

edited

Loading

softvision-oana-arbuzov commented Jun 2, 2021 •

edited

Loading

fede3mmanuel commented Jun 9, 2021

blog.cloudflare.com - Items are overlapped #48332

blog.cloudflare.com - Items are overlapped #48332

Comments

fede3mmanuel commented Feb 15, 2020

softvision-sergiulogigan commented Feb 17, 2020

karlcow commented Feb 17, 2020

karlcow commented Feb 17, 2020

digitarald commented Feb 18, 2020

karlcow commented Feb 18, 2020

emilio commented Feb 19, 2020

emilio commented Feb 19, 2020

FremyCompany commented Feb 19, 2020

atotic commented Feb 19, 2020

emilio commented Feb 19, 2020

karlcow commented Feb 19, 2020

karlcow commented Feb 19, 2020

karlcow commented Feb 28, 2020

sssilver commented Feb 28, 2020

zackbloom commented Feb 28, 2020

zackbloom commented Feb 28, 2020 • edited Loading

karlcow commented Mar 2, 2020 • edited Loading

softvision-oana-arbuzov commented Jun 2, 2021 • edited Loading

fede3mmanuel commented Jun 9, 2021

zackbloom commented Feb 28, 2020 •

edited

Loading

karlcow commented Mar 2, 2020 •

edited

Loading

softvision-oana-arbuzov commented Jun 2, 2021 •

edited

Loading