I'm working on a specific page:
http://portfolio.jrstrauss.net/work/cg.html
and Chrome is doing a bizarre job of rendering the page. It renders perfectly in all the other browsers, Opera, Safari, Firefox, Camino, but Chrome does not give the same results.
I change nothing in the markup and refreshed, but now the layout is all jacked up. I was working with Chromium yesterday and started having the problem, but it was acting bizarre-- I would load the page and it would render fine every single time, but when I would refresh, it would completely change. Then tried it in Chrome and had no issues, so I passed it off as a Chromium bug. Now tonight it started doing the same thing in Chrome, even though it didn't before, so now I'm starting to wonder if there a problem with my markup. Though I see nothing. Does anyone else see a problem with my CSS or HTML?
If it looks good in Chrome on your computer, let me know via comment. I've taken a screen shot to show what it's supposed to look like and what it's doing weird in Chrome/ium.
Renders correctly:
http://i.imgur.com/qp8mu.jpg
Renders incorrectly (only in Chrome and Chromium):
http://i.imgur.com/iIhdI.jpg
It renders correctly in chrome for me, but it seems highly likely to be a problem with wrapping. If I reduce the width of your div.innerContentBox from 800px to 600px, then it looks exactly like the problem you've shown. As I said, I can't reproduce the problem, but it seems to have something to do with insufficient width.
Related
So I developed a profile on a website of mine in Firefox (the website accepts HTML in profiles). I then opened it in Chrome and, while there's differences and Pros and Cons I notice to each, I'm not really bothered by anything except the fact that my audio player at the top is properly styled in Firefox, but not in Chrome.
It seems to me that the "height" CSS didn't take in Chrome for some reason, meanwhile it takes just fine in Firefox.
Any idea how to fix this issue? If not, at least help me to make it so that it'll display normally in Chrome, even if it has to be fat instead of the slim bar I wanted. At the very least I want it to be functioning and not obscured by the page, even if it's not exactly what I had envisioned.
I've tried several #media "hacks" to target only Chrome / webkit but they don't take either.
Profile in question located here (flash required). Sources are freely available in the sources tab. The CSS classname is .BGM.
Thanks.
Edit: Images of the difference: https://imgur.com/a/EQyqD
You can see the problem - I want it to display correctly like it is in Firefox, not be crushed like it is in Chrome. I'd actually like to be able to style it further for Chrome - make it styled the same in Chrome as it is in Firefox - though I'm guessing that Chrome may just not be as flexible about this as Firefox is.
PS: Yes, insane that a site still runs on Flash over HTTP in 2018, and yes the profile designs on the site are all juvenile and edgy. It's a guilty pleasure of mine - and it's a nice little coding playground.
Change the height attribute within the .bgm class to something bigger, like 30.
If you're really attached to how the player looks on Firefox, you can also introduce some Chrome only margin to .bgm:
-webkit-margin-before: 12px;
If you want to make the Chrome player slimmer you will need to look into webkit masks, which requires an additional image file.
The situation.
I have a site that has a menu strip with some links. On a desktop these links work as expected, on mobile firefox, great! However on webkit, safari and chrome, they don't seem to register when you touch them.
I used Adobe Edge to check it out, but it worked fine in that browser, which browser is that anyways, is that webkit based or other?
I also tried using js to debug, but no luck. I would try to to get an alert() if say the parent element, or the link element itself was touched, I can only seem to get them to register if I mash around a bit.
The site is built on Sitefinity, I have looked around and can't seem to find anything relating to this.
How might I be able to go about trying to figure out what the issue is here? It seems to me to be webkit related, correct me if I a wrong, as it happens on chrome and safari.
On Android devices, you can write messages via console.log('blah!') and read them using logcat. You shuold also see other javascript errors in there.
See:
http://developer.android.com/guide/webapps/debugging.html
I got a really strange problem, and after so much tries and research I can't get out of it.
I have a website, but SOME (just 5% of visitors) people with the SAME version of chrome, see the text flowing out of divs and text overlapping. It's very strange because I tested the website on all chrome browsers using browser testers, without any problem. And in internet explorer or firefox this problem never happens...
A page is located here
And here are some screenshots of what SOME people see (maybe you won't see this in chrome)
click here
Maybe it is because of the font face I am using? Or maybe some bad coded CSS?
Please help me out of this!
Thanks a lot!
I see you use .svg font. Recently I was hunting some Chrome font rendering bugs and saw this:
http://code.google.com/p/chromium/issues/detail?id=95102
This seem very similar to issues you are having. You could try to serve some other font type to Chrome and if this would fix that.
If you don't want or can't serve some other font type to Chrome, the only thing you can do is wait until Chrome version 24 is out to all users which should be soon (I can't find any announcement)
I tested it in
Chrome 23.0.1271.97 m
Chrome 26.0.1371.0 canary
Chromium 25.0.1334.0 (169326)
# Windows 7 x64 and your page seems fine for me.
For some reason, on this page, in Chrome 17, CSS3 transitions aren't working the first 3 links in the footer/nav: http://jacob.bearce.me/index2.htm. The links are exactly the same, no added classes, and I went through step by step to figure out what it was, it's changing the HREF property that breaks them. For some strange reason, services.htm works, but projects.htm does not. I have absolutely no idea why.
UPDATE: Tested in Firefox, Opera and Safari it seems to be only a Chrome issue. It makes no sense. It's not even a webkit issue (unless Chrome's got a newer version than Safari).
Sorry if this response is slightly late, however, I'm currently on Google Chrome 16.0.912.63 beta-m and I have the exact same problem as you do. In fact, on your website, out of the 4 links below, it is only the home link that doesn't seem to be working too well with CSS3 transitions (on my side).
On a website I'm currently working on, the transitions seems to only work on some links and not others. I can't really see any trend to understand what causes it. Strangely though, when I visit your website or mine through Incognito, everything works well. It doesn't work even with my extensions disabled.
It looks to be bug with Chrome. I've figured out that it's definitely an issue with :visited links, but can't fix it no matter what. In incognito mode you don't see the issue because Chrome isn't logging what links you've visited. From what I've seen, it looks like it's an issue in Chrome 16 or higher. Hopefully they'll fix this in the next release, but for now, we'll just have to ignore it.
Check out the bottom of this page in Chrome (10.0.648.134): http://seatgeek.com/jobs/
The page mysteriously extends well beyond the footer. I'm perplexed by this because:
Looking a the web inspector, the web inspector is saying that the html ends at the end of the footer, so it's hard to know how to debug this.
This only happens in Chrome (not even Safari)
It doesn't happen on any other pages on my site except for the jobs pages
This isn't JS-related; I've turned off JS and it still happens.
It's a reported chrome bug: http://code.google.com/p/chromium/issues/detail?id=75815
I would wait for fix.
You might want to validate your mark-up first. There are a few errors.
I've seen strange behaviour before in Chrome with invalid mark-up. In fact it was a difference between Chrome 8 and 10 that caused problems for me in the past with invalid mark-up, so that might explain it.