I was checking the background-clip property on w3schools.com and I was playing with different values.
I noticed that on Chrome the background style updates only after window resize and I don't know if it depends by Chrome version (66.0.3359.181).
If you open this page and change values, do you see changes on background style?
I also tried with Edge and Firefox and it works perfectly.
It seems fixed in version 71.0.3578.98.
Related
I found a weird issue while testing my application in safari(Version 13.1).
Basically, an image in the website is broken and it's not loaded.
Chrome and FireFox are showing the alt attribute's value and occupies the least height possible for the unloaded image tag.
But safari browser in my mac occupies way more height than others and having a weird user experience pushing the tag to bottom.
Here is the reproduction of the issue - https://jsfiddle.net/etjhgpdo/1/ - Open this url in both chrome and safari. We can see the difference that heading tag is pushed down as the image tag's height is so much in safari.
Thanks in advance.
As I didn't receive any answer, I am adding the workaround fix I found on web.
Addding onerror="this.style.height = '50px'" on the image tag helped me in reducing the height.
But this will apply to all the browsers as we are not specifying any browser here.
I´m testing my newest design and there is one specific issue I cannot figure out.
It appears that a specifik element is triggering an opacity change when I hover the element.
According to my tests this only occurs in Firefox and IE. It doesn´t happen in Chrome.
My best guess is that this is happening due to some sort of browser specific CSS but I have not been able to locate any CSS on any of the elements that is causing this opacity change.
One of the problems is also that I normally use Chrome F12 when I need to spot source code issues and hover CSS effects are hard for me to locate in Firefox and Chrome.
Here is a link to my test-site where you can see the problem in Firefox and IE when you for instance open the accordeon tab "Vælg Stof Indvendig" and hover the images:
http://www.geniusdesign.dk/Demoer/Tailoredsuits/design-dit-eget-jakkesaet/design-selv-jakkesaet-detaljer
You have css that says the following: .product-field-display:hover { opacity: 0.5; }
Because the .product-field-display element is a span wrapping div's, Chrome is basically making it a non-element (height/width of 0 and no placement on the page). But Firefox is still reacting to it (I guess IE is too).
I can't see your site, but have you used a reset at the top of your CSS? This usually solves problems like this. Some browsers s=do weird things by default!
I am facing a strange problem where the a navbar I have created is displaying differently in Chrome than Firefox. Here is a screenshot of each. Firefox is displaying it correctly:
While the background colors are getting lost in Chrome:
I have created a fiddle here, but the problem is not apparent when viewed on the jsfiddle site using Chrome. In the live Chrome browser, the body declaration over-rides the definition for the navbar, even though z-index is used.. Any ideas on how to solve this strange issue? Im using an old version of Chrome right now (21.0.1180.90), trying to insure backwards compatibility. Thanks for your ideas!
Your code works fine tested in "live Chrome browser" 21.0.1180.89 (couldn't find the 21.0.1180.90) on OS X 10.8.2.
And I think you are missing the point of z-index:
For a positioned box, the 'z-index' property specifies:
The stack level of the box in the current stacking context.
Whether the box establishes a stacking context.
http://www.w3.org/TR/CSS2/visuren.html#z-index
z-index is not used to override any other css declaration.
You're code is working in Chrome version 24 , Firefox and Internet Explorer 10 . Maybe the problem is only in that version of Chrome or you override it somewhere else.
When checking my website a couple of days ago, everything was OK, but having looked at it this morning in Chrome, the background image and colour applied to the body have just disappeared completely. Safari is also looking pretty bad with the background colour visible and the background image on the body only visible behind other background images!
Things I've tried...
resizing the background image so that it's a lot smaller
removing the image and just having a background colour
viewing the site in incognito mode
Absolutely no difference in the outcome. I've cleared the cache and tried disabling caching but to no avail. Also, the file definitely exists. Not only can I see them being downloaded in the 'Network' tab in the Chrome developer tools, you can see it here: http://charanj.it/assets/images/website-bg.jpg
You can also see the smaller version I tried http://charanj.it/assets/images/website-bg-small.jpg
Weirdly, resizing the browser window in Safari brings the background image in. Another odd thing is that another site I built using almost exactly the same background techniques shows the images just fine, see http://nikeplusphp.org
The CSS has been generated using LESSPHP but I'm sure this isn't the issue as it was working fine before and no changes have been made to the CSS in months.
I have Chrome v19.0.1084.46 m and Safari 5.1.2, Windows 7 but the issue also occurred on my MacBook with the Chrome 19.
Tiny bit more information: Issue happens in a locally run copy of the website too.
Although it seems to be a browser issue, the culprit was the following line of CSS at the top of the stylesheet:
* {
-webkit-backface-visibility: hidden;
}
I tried moving it elsewhere but I still get the same issue. Applying to individual elements seems to work, but as I no longer use any 3D transitions on the site, there's no need for it and removing it has solved the problem.
In my chrome(20.0.1132.11 dev-m) everything is ok.
The problem may be in the extensions (try to disable all) or the most chrome (try to reinstall it)
Update: Same bug on SO and in accordance with the answers to that question, this bug is known and not yet fixed
I checked your website, and the background works, try to clear all navigation data (ctrl+shift+delete select all check-boxes and any time of).
I have been working with changing the background colour of an element using css3 animations. However it does not work in Chrome. I have attached a jsFiddle example of the code I am using. It works in Firefox, but not in Chrome and despite my best efforts I have been unable to work out what the problem is.
In chrome is seems to ignore the reference to background-color only. If I move the item or apply any other effect to the element it works fine.
http://jsfiddle.net/qWKEs/6/
Thanks in advance.
This is a bug in chrome. Should be fixed in version 18 as per http://code.google.com/p/chromium/issues/detail?id=101245
I had this same issue using the background property in Chrome with CSS3.
However the version of Chrome is 21.0.1180.83 (up to date as of 8/24/12) so the problem still exists.
I resolved it by specifying background-color instead and that works fine.
Interestingly enough the W3C says it's only supported in version 1.