I am having the same issue as this user: https://stackoverflow.com/questions/27856262/bootstrap-carousel-affects-all-fonts-on-change-slide#=
My working site is: http://bobbyomari.com/clients/charterboost
If you scroll towards the bottom of the page and rotate the testimonial, you'll see that the footer links change their thickness. I tried applying the suggestion in the above link, but it's not working for me.
Any suggestions? Thanks in advance for your help.
Try this solution: How to prevent Webkit text rendering change during CSS transition
Seems forcing GPU acceleration helps with the text rendering.
Related
I've been probably overthinking this and trying out too many things incorrectly..
http://testserver.glow-berlin.de/kurzfilmwettbewerb
this is the website we're talking about.
At the bottom (right above the footer) you find an image that is supposed to stick to the bottom of the pink box.
Whenever I check it on mobile, the image offsets outside of the box. I built the section using the grid system but struggled with it, so I removed it for mobile... I just couldn't figure out the problem. Now – without the grid system – the same problem appears. On Android it seems to work fine but on iOS the image jumps out of the box again. When I fix it for iOS the problem appears on Android.
Any help with this?
The background-attachment: fixed; style on your div with the ID #gutfilmer is the problem on iOS.
'background-attachment: fixed has been disabled on iOs since it costs a lot on mobile browsers.
If you remove it the filmflap stays on the pink background.
try
#gutfilmer {
overflow:hidden;
}
i am currently building a wordpress page and encountered to a problem:
when i zoom in, the title and text of the container under the slider (revolution slider) hides behind my slider. I think this problem could be solved with some lines of css. In the posted image you can see my problem.
https://imgur.com/OFDgaTC on 100% zoom
https://imgur.com/fUZyqIP on 110% zoom
Thank you.
It's hard to help without any code, but I can guess you have a fix top margin (px unit) or equivalent on your title tag. Instead use another size unit (%) for example.
Hope this helps. Can't do much without seeing any code.
Why when I hover mouse on cards image moved ?!
I am trying to fix it and I find when I remove page direction and or remove overflow-y from #center it's fixed but I need them !!
even when I inspect elements in cards and mouse hovering could to see all elements are moved but shown correct ! I guess it's maybe page rendering problem in chrome browser
in fact what is problem and how can I to fix it technically ?
JSFiddle Demo
This issue appears to be a Chrome bug according to this topic:
image moves on hover - chrome opacity issue
and I think you should setting position:relative to inner img solves the problem
Added introjs to the site I'm working on and ran into two issues.
First: The highlighted area was overlaying the content underneath. I added a position absolute in the introjs.css file, which fixed this issue.
Code
Second: The highlight area is out of position on Chrome. I think both issues are to do with the fixed position on that bootstrap navbar.
Example
Any help would be great.
It turned out to be chrome not being able to handle zoom in css.
I need some help finding what exactly is causing the white space on the right in mobile view of my site.
http://shahil229-001-site1.smarterasp.net/
I've tried using overflow-x : hidden in the css but it stops the top navbar animations from working in the normal desktop view so thats out of the question.
Any help would be appreciated. Thanks
I found the issue! In the box where it says "SYSPRO" your link seems to be overflowing. Therefore causing it to make the page wider then it should be, and you can't see it because the link is white.
EDIT
Specifically the link http://www.syspro.com/product/what-is-erp.
EDIT 2
As Jesse Dockett said, also add width: 100% to your code. Thank You Jesse! :)