Came across an interesting problem that's really stumped me when attempting to implement the Twitter Bootstrap framework today. The issue I was initially attempting to solve was the appearance of horizontal scrollbars in Chrome when I resized the browser close to the breakpoints in the responsive template.
To troubleshoot this, I decided to copy the starter template verbatim, which was displaying correctly for me on the Twitter Bootstrap site. For extra consistency, I altered the relative paths of the included Bootstrap resources to point directly at the same files hosted on Github.
Mind-bogglingly, the problem still occurred even using the exact same code. You can view a working example of the broken version here. Just resize the window horizontally in the latest version of Chrome and you'll notice scrollbars will appear on the bottom when the width nears a breakpoint. On a hunch, I copied the same file over to a different server and...it works?!
I honestly don't have a clue what could be causing HTML/CSS/JS to be behaving differently in the same browser across two different servers. The closest I could find were discussions from developers transferring files from local to remote environments and/or using IE. Any insight would be much appreciated!
I'm guessing Chrome was zoomed in.
Related
I'm trying to get a job as a developer. I've made a personal website to show employers but I've got a bug. Everything is fine in all browsers except Chrome.
On the first load of the page, the navbar layout is messed up. After you hit refresh or navigate to other pages the proper layout is maintained.
I have no idea what is causing this. Can anyone help?
Link to website: www.alexanderisgr8.com
Possibly a caching issue due to an older css. Try doing a hard-refresh [ctrl+f5]?
I'm using iframe-resizer to refit the content of one page inside another. I got it working well for desktop browser viewing, but cannot make my iframe resize on mobile in my realistic demo. I tested on a second server too with a different page design for another real-world demo. Both didn't resize. I'm testing in iOS Safari and Chrome. I set up a simple test case and it worked how it's supposed to, unlike my two demo pages. Obviously, something in the source of the demo parent pages is preventing the intended functionality. Can someone please help me find what is preventing these demo pages from resizing properly in mobile? I figure if two random sites to test this on cause a problem, it is likely that my clients installing this widget will also frequently encounter this problem and I need to be able to offer a remedy.
Test case (good): http://healthfitchiro.com/wp-content/iframe.html
Realistic demo (bad): http://healthfitchiro.com/alternate-login
The website I'm developing suddenly stopped working properly. The images on my Homepage appear sliced and in weird places (however when inspecting source and hovering over certain elements, the highlighted content seems to be in the right place), some hover on effects don't work and some text doesn't render.
Everything works properly in all other browsers except for Google Chrome. I cannot think of any other thing I've updated in the source code than executing svginjection plugin.
I uploaded my backed up files that used to work before, but the problem still occurs. It doesn't show up on every single computer, just on some (and I've checked it on multiple machines, both - Mac and Windows).
Just to clarify, I did clear the cache, I did check in the Incognito mode, I did restart my computer. None of these helped. I'm also 80% sure that problem only occurs on computers, on which this website was previously opened (the pattern I noticed after making around 10 tests at work).
Thanks for any help
Aight, so after going through all my files, trying to disable multiple options, etc... Everything is fixed now. If you do have similar problem, go through your css files and disable all webkit powered transforms and transitions, cause apparently enough is enough and if you have too many, Chrome just won't handle it. I managed to still reuse some of them, so... Must have caused some glitch in the matrix and that's why it all got messed up. For weirdly positioned images check z-index of parent container.
I have encountered the strangest problem I have ever encountered in my web development career, and I just cannot seem to solve it.
I developed a website: www.ktngroup.co.uk a few months back, all worked perfectly upon launch across all devices. Now it would seem as though the site has developed some form of issue limited only to ipad. The strange thing is, I cannot replicate it when using css user agents and screen sizes, which is strange becuase it looks like a css problem.
I cannot describe the issue very well, but it looks as though all the content (Except the header) is pulled off the site on ipad/not displayed. Also, when using adobe edge inspect; I see that none of my css rules are being applied to the elements.
Comparing the desktop version at 1024px vs the ipad landscape is the best way to discover the issue.
UPDATE: When I cancel the iPad fully loading the site (roughly the first two panels) the site functions perfects on those two panels – almost as if its loading something further down that breaks the site?
If anyone has any guidance, I truly could not thank you enough.
For those who may encounter the issue – it's what Jack Pattishall suggested. The iPad didn't seem to respect vh as a unit, and as a result my images were huge.
To fix this I added a media query to handle the handheld tablets with a set pixel width/height.
Hopefully this can be of use to someone
Here is the website I want to replicate: http://www.voncarcha.com/contact
Here is my website: http://foxweb.marist.edu/users/kf79g/contact.php
I mainly want to replicate his about page and contact page across all screen sizes that are large medium and small. How can I do this with only css like I did with all of my other pages besides the about page and contact page?
All of my code is located in the page source under these files (after right clicking view source on your browser):
screen_styles.css
screen_layout_large.css
screen_layout_small.css
screen_layout_medium.css
contact.php
about.php
I tried absolutely everything I could think of. I tried to replicate his website, but mine simply does not work as smoothly. Mine especially looks terrible on older browsers IE 7-9 and Firefox, while his does not for some reason. I want my site to be optimized to work across all browsers. I do not know what to do anymore. After this is done, my website will finally be finished. Please help me out I need to get this project done as soon as possible. I would really appreciate any assistance.
Media Queries (currently what you're doing with responsive design) are the part of HTML5 and CSS3. So If you try these features in browsers that do not support HTML5, they will not work.
This link says, It can handle media queries in older browsers. You should take a look at it.
You can also take a look at This one