WordPress.org

Making WordPress.org

Opened 6 months ago

Closed 5 months ago

Last modified 5 months ago

#2857 closed defect (fixed)

News blog on Firefox for android and facebook falls out of content

Reported by: dingo_bastard Owned by:
Milestone: Priority: high
Component: General Keywords: has-patch
Cc:

Description

When I opened the news on facebook about the new release I noticed that I can scroll vertically.

I checked Chrome, and there it looked fine. I went to check the Firefox browser on android and the same thing happened.

From what I've managed to inspect, it seems that the iframe holding the video overflows the container.

Also .col-9 in the wp4.css on line 2103 has left and right margins set to 14px, but shouldn't those be paddings? I also noticed that firefox sets the box-sizing to content-box, which is not ok. Why isn't it set to global?

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Attachments (1)

2857.patch (1.2 KB) - added by dingo_bastard 6 months ago.
Patch that fixes content overflowing

Download all attachments as: .zip

Change History (7)

@dingo_bastard
6 months ago

Patch that fixes content overflowing

#1 @joyously
6 months ago

I can scroll vertically.

You mean horizontally, right?

#2 @coffee2code
5 months ago

  • Resolution set to fixed
  • Status changed from new to closed

@dingo_bastard: Thanks for identifying the issue and providing a patch!

It turns out the issue was a result of characters (invisible whitespace characters?) in the content of the WordPress Now on HackerOne post. Chrome has support for word-break: break-word (which Firefox does not) which likely prevented it from being an issue there.

Anyhow, I retyped part of the the last sentence and everything looks fine now. It shouldn't be an issue that naturally occurs.

As for the other recommendations in your patch, we generally try not to make changes in wp4.css except to fix verifiable issues or to add styles for new things. That styles in that file are applied to ALL of the sites associated with wordpress.org. Making a global change, even if well intentioned, might have adverse effects somewhere. So unless there are any reproducible issues you came across that you were trying to fix, we'll keep the styles as-is for now.

Cheers!

#3 @dingo_bastard
5 months ago

Thanks for the explanation.

Wasn't aware of the wp4.css being a global style. But the box-sizing: border-box; rule seems logical to be globally applied, no?

#4 @joyously
5 months ago

But the box-sizing: border-box; rule seems logical to be globally applied, no?

No! That's one that will easily be a problem with legacy content.
The word-wrap rule should be extended to use all the variants for the different browsers, though. That's fairly simple and gets all browser to work instead of changing the content so the rules that are there work for all(?).

#5 @dingo_bastard
5 months ago

No! That's one that will easily be a problem with legacy content.

In what way? Can you elaborate, please?

#6 @joyously
5 months ago

box-sizing: border-box affects how padding is rendered. All manual adjustments to padding in legacy content would be different if that is globally applied. This can break content layouts and make images look smaller. Especially when padding percentages are used, you just don't know what is in the old content.

A couple of years ago, I was using a theme for several sites. There was an upgrade that applied box-sizing globally. My sites looked strange and I'm sure I didn't even look at all the pages. I got the theme author to change it to only apply to images or theme-controlled elements. It has to be used together with the padding and margins, not independently.

A few months ago, I helped a theme author debug a problem where the text typed into the search box wasn't visible. It was because of the box-sizing. The padding used to line up the input with the icon was strange. As soon as we removed box-sizing, it was easy to line it up.
So, there is no knowing what kind of manual adjustments were already made to the content being styled. Adding box-sizing globally can be problematic.

Note: See TracTickets for help on using tickets.