search

WikiEducationFoundation / WikiEduWebsite2015

New Wordpress Theme Work
MIT License
1 stars 2 forks source link

Layout broken in Firefox #21

Closed ragesoss closed 8 years ago

ragesoss commented 8 years ago

screenshot from 2015-07-16 07 21 45

thenickcox commented 8 years ago

@ragesoss Because I hadn't seen that when I was developing, I had worried that it was a Firefox-on-Linux-specific layout bug. My fears were confirmed this morning when I opened the page in Firefox for OS X:

screen shot 2015-07-17 at 8 15 09 am

Which Linux distro are you using? If you let me know, I'll see if I can spin up a VM and investigate.

ragesoss commented 8 years ago

Ubuntu 15.04 was what I was using. If it's Linux-only, it's low priority.

On Friday, July 17, 2015, Nick Cox notifications@github.com wrote:

@ragesoss https://github.com/ragesoss Because I hadn't seen that when I was developing, I had worried that it was a Firefox-on-Linux-specific layout bug. My fears were confirmed this morning when I opened the page in Firefox for OS X:

[image: screen shot 2015-07-17 at 8 15 09 am] https://cloud.githubusercontent.com/assets/702327/8750417/0cf9e5e0-2c5c-11e5-981e-dbf8fa812b01.png

Which Linux distro are you using? If you let me know, I'll see if I can spin up a VM and investigate.

— Reply to this email directly or view it on GitHub https://github.com/WikiEducationFoundation/WikiEduWebsite2015/issues/21#issuecomment-122308593 .

thenickcox commented 8 years ago

Just wanted to circle back on this to clarify "low priority". How low? Should I try to download that Ubuntu version and spin up a VM, or should we hold off?

ragesoss commented 8 years ago

Hold off. If you want a bug for this afternoon, I noticed that the hamburger icon position is weird (on iPhone and Firefox, at least). :)

On Monday, July 20, 2015, Nick Cox notifications@github.com wrote:

Just wanted to circle back on this to clarify "low priority". How low? Should I try to download that Ubuntu version and spin up a VM, or should we hold off?

— Reply to this email directly or view it on GitHub https://github.com/WikiEducationFoundation/WikiEduWebsite2015/issues/21#issuecomment-123102650 .

thenickcox commented 8 years ago

When you say "weird"…?

You're going to hate me, but:

Firefox:

screen shot 2015-07-20 at 5 19 40 pm

Chrome on iOS:

unnamed

Safari on iOS:

unnamed-1

Which iOS browser/device are you using?

ragesoss commented 8 years ago

iPhone 5s in Safari.

img_0705

FF 39 on Ubuntu 15.04

screenshot from 2015-07-20 17 23 59 screenshot from 2015-07-20 17 23 48

On Monday, July 20, 2015, Nick Cox notifications@github.com wrote:

When you say "weird"…?

You're going to hate me, but:

Firefox:

[image: screen shot 2015-07-20 at 5 19 40 pm] https://cloud.githubusercontent.com/assets/702327/8790543/d6b6a860-2f03-11e5-835c-759ee99222f9.png

Chrome on iOS:

[image: unnamed] https://cloud.githubusercontent.com/assets/702327/8790549/dd02219a-2f03-11e5-8bcc-159c4bb9ce19.png

Safari on iOS:

[image: unnamed-1] https://cloud.githubusercontent.com/assets/702327/8790553/e1b0ba58-2f03-11e5-87a6-92a80081daf9.png

Which iOS browser/device are you using?

— Reply to this email directly or view it on GitHub https://github.com/WikiEducationFoundation/WikiEduWebsite2015/issues/21#issuecomment-123105688 .

thenickcox commented 8 years ago

Huh. That Safari screenshot is from 5s in Safari. Can you post a screenshot of yours?

ragesoss commented 8 years ago

Yep, I added it to the GitHub comment above. (It was attached to my email reply, but I guess GitHub doesn't do that.) Maybe the version that fixed it is not deployed to production?

ragesoss commented 8 years ago

Ah, yeah. looks different (not broken) on staging. But the cover image isn't working on staging.

ragesoss commented 8 years ago

Or is that intentional, the black header?

thenickcox commented 8 years ago

No, sorry. I haven't yet moved the images from prod to staging. I heard mention of a CDN at some point, so I just focused on the content. I'll look at getting those up tomorrow.

ragesoss commented 8 years ago

Thanks! Sorry for the mixup.

On Monday, July 20, 2015, Nick Cox notifications@github.com wrote:

No, sorry. I haven't yet moved the images from prod to staging. I heard mention of a CDN at some point, so I just focused on the content. I'll look at getting those up tomorrow.

— Reply to this email directly or view it on GitHub https://github.com/WikiEducationFoundation/WikiEduWebsite2015/issues/21#issuecomment-123109450 .

thenickcox commented 8 years ago

Okay. Transferred the images to staging.

I also realized what you were talking about with the hamburger menu. Was it on production? There was an issue with some of the staging files being accidentally deployed (I believe it was a mouse misfire on my part in the process of FTP'ing). That's been rolled back.

So we should be all set on staging. Thanks for your patience!

ragesoss commented 8 years ago

Yeah, the hamburger issue was on production.

Thanks!

On Tue, Jul 21, 2015 at 9:46 AM, Nick Cox notifications@github.com wrote:

Okay. Transferred the images to staging.

I also realized what you were talking about with the hamburger menu. Was it on production? There was an issue with some of the staging files being accidentally deployed (I believe it was a mouse misfire on my part in the process of FTP'ing). That's been rolled back.

So we should be all set on staging. Thanks for your patience!

— Reply to this email directly or view it on GitHub https://github.com/WikiEducationFoundation/WikiEduWebsite2015/issues/21#issuecomment-123398482 .

ragesoss commented 8 years ago

@thenickcox This is back up to a high priority, as I'm seeing the same issue (from the initial description) in Firefox 38 on Windows 8.1.

thenickcox commented 8 years ago

No wonder I was confused about this. This boils down to a font bug: a difference of the baseline in different weights. I was offsetting it for Firefox (assuming it was a browser issue), which is why it broke on Firefox on Windows. Here's a screenshot of the regular weight: screen shot 2015-07-21 at 2 35 09 pm

Compare that with the bold weight: screen shot 2015-07-21 at 2 35 53 pm

The only thing that changed between those two screenshots was the font weight. That doesn't happen on any other font I tried (Arial, Times New Roman, etc.). The baselines are consistent, across the board.

You can confirm this issue with Cardo (the font we're currently using) by going to Cardo's specimen site on Firefox for Mac and Chrome side-by-side:

screen shot 2015-07-21 at 2 37 53 pm

Crazy, huh?

So as I see it, we have a few options. 1) Sniff browser and OS combo. This is error prone and certainly not the most elegant implementation. 2) Use the bold weight in Firefox. Design wise, this makes those numbers a bit too prominent. (See screenshot above.) 3) Use a similar font with a consistent baseline. Times New Roman, although not the freshest and most exciting font, would be a good choice. Compare:

(Cardo is left, Times New Roman is right)

screen shot 2015-07-21 at 2 41 02 pm

ragesoss commented 8 years ago

Sweet. Let's go with Times New Roman. We won't tell Ivan or Riley, and just see if they notice at some point. :)

On Tue, Jul 21, 2015 at 2:41 PM, Nick Cox notifications@github.com wrote:

No wonder I was confused about this. This boils down to a font bug: a difference of the baseline in different weights. I was offsetting it for Firefox (assuming it was a browser issue), which is why it broke on Firefox on Windows. Here's a screenshot of the regular weight: [image: screen shot 2015-07-21 at 2 35 09 pm] https://cloud.githubusercontent.com/assets/702327/8813117/bf2a923a-2fb5-11e5-9ed8-f28a824f9147.png

Compare that with the bold weight: [image: screen shot 2015-07-21 at 2 35 53 pm] https://cloud.githubusercontent.com/assets/702327/8813122/ce4d4dc0-2fb5-11e5-84be-f1368adfcc26.png

That doesn't happen on any other font I tried (Arial, Times New Roman, etc.). You can confirm this issue by going to Cardo's specimen site https://www.google.com/fonts/specimen/Cardo on Firefox for Mac and Chrome side-by-side:

[image: screen shot 2015-07-21 at 2 37 53 pm] https://cloud.githubusercontent.com/assets/702327/8813155/20795a08-2fb6-11e5-91ac-23c5f7e8d344.png

Crazy, huh?

So as I see it, we have a few options. 1) Sniff browser and OS combo. This is error prone and certainly not the most elegant implementation. 2) Use the bold weight in Firefox. Design wise, this makes those numbers a bit too prominent. (See screenshot above.) 3) Use a similar font with a consistent baseline. Times New Roman, although not the freshest and most exciting font, would be a good choice. Compare:

(Cardo is left, Times New Roman is right)

[image: screen shot 2015-07-21 at 2 41 02 pm] https://cloud.githubusercontent.com/assets/702327/8813223/9713db2a-2fb6-11e5-9444-b2493b6d97ce.png

— Reply to this email directly or view it on GitHub https://github.com/WikiEducationFoundation/WikiEduWebsite2015/issues/21#issuecomment-123485481 .

thenickcox commented 8 years ago

Heh. Sounds good! Yeah, they're really similar.

thenickcox commented 8 years ago

Great. Here's what you should see on staging now. From left to right, Firefox for PC, IE 11, Firefox for Mac, Chrome for Mac.

screen shot 2015-07-21 at 2 49 59 pm

Will you confirm that it looks something like this in Firefox for Linux?

mattfordham commented 8 years ago

You guys haven't even met face-to-face yet and you're already forming conspiracies? ;)

ragesoss commented 8 years ago

Yep, that did it. :)

thenickcox commented 8 years ago

Great. Then let me know when we should merge this in and put it out to prod.

ragesoss commented 8 years ago

@thenickcox Those two pages are good to go for moving to production. We won't link them from anywhere yet, until we get signoff from the ED and the fundraising folks. It'd be nice to get #23 taken care of before we start showing these pages off, as well.