search

emacsorphanage / org-page

[INACTIVE] A static site generator based on Emacs and org mode.
673 stars 99 forks source link

Search Bar and Ad-Block #85

Closed ic3guy closed 10 years ago

ic3guy commented 10 years ago

When viewing a page generated with org-page on Chrome that has ad-block. The rendering of the fonts is incorrect. Turning off ad-block fixes the problem. I guess it doesn't like the google search.

sillykelvin commented 10 years ago

Hi,

On my box this seems OK, I also have chrome/ABP installed.

So could you please provide more detailed info? like a screen capture.

Thanks

ic3guy commented 10 years ago

Yup! Here are two video captures that should show the issue.

http://youtu.be/zzN6DcrzBv4 http://youtu.be/uFiqP1w5aKo

One of them shows how disabling ad-block stops the font-size flicker when clicking on links. However, even when disabling all extensions, the font size fills the entire screen. If I try to zoom down with Command-Minus, the fonts jump back to small. As soon as you click on a link again, the fonts grow big again.

This is surely a CSS issue. If you see in the video where I visit @mdo's webpage. His template works fine.

Btw. Org-Page is awesome!

sillykelvin commented 10 years ago

Thanks for your videos, it looks weird, on my box, I can reproduce that the font will be large while loading the page, but it will return to normal when page is loaded, as shown at the beginning in your second video. but I cannot reproduce that the font stays large when ABP disabled.

However, I think the two issues are caused by same bug, I will look into it and try to provide a solution.

sillykelvin commented 10 years ago

After some investigation, I found that the root cause is the rem unit using in css file, Chrome has a bug when some elements' width/height are defined with rem. BTW, Firefox does not have this issue.

Related chrome bug: https://code.google.com/p/chromium/issues/detail?id=330410

Now I believe this issue has been fixed.

ic3guy commented 10 years ago

I saw your changes and they should work. However, rem's are good for a responsive design and I would think it is best to stay away from px. I'm not a CSS expert, so don't quote me on that one ;).

This too seems to showcase the bug and a potential fix that allows you to stay using rem's. http://surefirewebservices.com/development/genesis-framework/genesis-rem-chrome-font-size-bug

I think this more accurately describes the bug: https://code.google.com/p/chromium/issues/detail?id=296380

See some easy one-line fixes here: http://stackoverflow.com/questions/20099844/chrome-not-respecting-rem-font-size-on-body-tag

On Sun, Feb 23, 2014 at 10:47 AM, Kelvin Hu notifications@github.comwrote:

After some investigation, I found that the root cause is the rem unit using in css file, Chrome has a bug when some elements' width/height are defined with rem. BTW, Firefox does not this issue.

Related chrome bug: https://code.google.com/p/chromium/issues/detail?id=330410

Now I believe this issue has been fixed.

Reply to this email directly or view it on GitHubhttps://github.com/kelvinh/org-page/issues/85#issuecomment-35828786 .

sillykelvin commented 10 years ago

Yeah, thanks for your links, the fix that SO link provided looks very easy.

However, I have changed all rems into pxes. Before this I use rem for all width/length measurements, including margins and paddings, but according to a CSS expert's advice (I am a totally CSS idiot :-p), he does not recommend using rem like that, besides, he thinks the rem implementation now still has bugs. That's why I changed from rem to px.

I also checked @mdo's site, his site also does not have any rems now. :-)

ic3guy commented 10 years ago

Yeah I saw that too on mdo's css files.

On Sun, Feb 23, 2014 at 3:44 PM, Kelvin Hu notifications@github.com wrote:

Yeah, thanks for your links, the fix that SO link provided looks very easy.

However, I have changed all rems into pxes. Before this I use rem for all width/length measurements, including margins and paddings, but according to a CSS expert's advice (I am a totally CSS idiot :-p), he does not recommend using rem like that, besides, he thinks the rem implementation now still has bugs. That's why I changed from rem to px.

I also checked @mdo https://github.com/mdo's site, his site also does not have any rems now. :-)

Reply to this email directly or view it on GitHubhttps://github.com/kelvinh/org-page/issues/85#issuecomment-35834303 .

sillykelvin commented 10 years ago

OK, thanks for your kindly help, closing issue now.