I'm looking once again for help from the collective. I created a site which when viewed in IE scrolls choppy but is smooth and fine in all other browsers. I checked on two different laptops to be sure it wasn't just my video card.
I also removed all the images to see if it was an image display issue and that didn't fix the problem. Does anyone have any ideas?
UPDATE* : Based on the feedback I've also tried the page with the images, box-shadows, and google font's removed and I still get the choppy scroll. I've also now just removed the nav and side banner...ugh still no good.
FOUND IT: Ok so after essentially deconstructing my website piece by css piece I found that the cause of the choppy screen was due (mostly) to the use of the border-radius attribute (thanks for pointing me in that direction). my page has two container divs that I applied the following css to:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Once I removed these the page was 90% smoother. I still get some choppy scrolling due to the header image it looks like but it's much better.
**The final solution was to:
1. Added conditional IE specifically to disable the border-radius when viewed through IE browser
2. To remove the last bit of choppy-ness :) I took all the images I was using, created a sprite for them in photoshop and then used yahoo Smush-It to compress that file. The site now loads great.
Thanks for the input all!
My url is http://monopolydealrules.com
Thanks!
**The final solution was to: 1. Added conditional IE specifically to disable the border-radius when viewed through IE browser 2. To remove the last bit of choppy-ness :) I took all the images I was using, created a sprite for them in photoshop and then used yahoo Smush-It to compress that file. The site now loads great.
Thanks All for your insight!
UPDATE* I also ran into a similar issue in safari mobile on my iphone for my mobile version. removing the border-radius attribute from the container element also fixed the speed for my mobile site.
It is very likely your box shadow causing the issue. There isn't a ton of documentation out there, but it is generally advisable not to use CSS box shadows that are that large.
http://nerds.airbnb.com/box-shadows-are-expensive-to-paint
I have a complex layout and IE9 was stutter scrolling for me too. In my case the regular page with the full layout scrolled fine but when adding a ckeditor in the same layout scrolling got very choppy. I guess IE just can't render rounded corners and a complex UI at the same time.
I used this to fix it:
<!--[if lt IE 10]>
<style type="text/css">
* {
-webkit-border-radius: 0px !important;
-khtml-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
</style>
<![endif]-->
Related
I'm working on a website in which part of the content (an "info" table that is different in every page) needs to be in a different div altogether in the responsive mode vs desktop mode.
I'm looking for a way in which I can repeat this div without having to copy it and paste it twice in every page. A bit like you'd have an php include query but without having a file specifically for it.
Is there a way to assign an ID / name for a part of the content on the same page and then "calling" it again?
EDIT with more info:
Basically every page has a floating div with information (it's a portfolio for an artist made by a friend that I've been asked to make responsive)
In the desktop version that info DIV is simply
#infodiv {
z-index:99;
position:fixed;
bottom:100px;
right:0px;
width:250px;
height:310px;
background-color:#FFF;
box-shadow: 2px 2px 10px #999;
text-align:left;
overflow:scroll;
}
For the responsive version I am including a navbar that will go over the entire page when a button is clicked (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_full)
The only way I've found to do this is to have #infodivdesktop that is hidden when accessing the website via mobile and to have the above navbar in the mobile version. Thus repeating the content of the div twice..
I would like to disable the zoom functionality on the a phpbb forum form which I am showing in my WebView whenever a user clicks on the username and password fields on a mobile Android phone.
It is advised to use
<meta name="viewport" content="width=max-device-width, user-scalable=no">
but I use PHP not HTML. Which PHP file do I need to edit and which code do I need to use to accomplish the same results as with the HTML code mentioned above?
After fiddling with SciTE and css, I edited the forum theme "form.css" and edited the section on inputbox:focus with 16px as this is the default zoom level value used by Android and iPhone. The WebView no longer zooms in on input field. hope this will help others as well.
.inputbox:hover, .inputbox:focus {
border: 1px solid transparent;
font-size: 16px;
outline-style: none;
I have a php script that returns a list of small images (like thumbprints) that are displayed based on search criteria.
I'd like these images to be displayed on after another until they reach approx 45% across the screen and then if there are more images than will fit in the space, the images continue on to a new line.
I have used CSS to set the following within a div.
.example {
Float: left;
Width: 45%;
}
But the images continue beyond the 45%.
If I used the style overlap:scroll; or overlap:hidden, the images stop at 45% and either you can scroll to see the others or they are hidden.
How can I make the images continue onto a new 'line'.
I've tried word-wrap without success.
Thanks for your help.
the way you describe it it should work just fine.
I made a jsfiddle DEMO
images are by default displayed as inline elements, if the elements are not images try using display:inline on them or display:inline-block.
Try adding display:inline-block; to the element.
The responsive design I'm working through has presented another problem. To keep it simple, I set the body to snap down to 480px if the screen size or device size is less than 750px. Then, ideally, the screen on any device should scale to fit the width.
After some help here already today, I added the viewport meta, so now the CSS is responding to both my iPhone and Android, as well as the desktop browser when minimized.
The iPhone looks great; it zooms to the width, so even though the webpage is approx 480px, it fits perfectly into my 320px iPhone screen.
However, on the Android, it's zoomed in too far. About 25%-30% of the right side is off the screen and I have to scroll over to see it. If I pinch-to-zoom-out just a bit, then the window fits the screen width-wise and it looks fine. I don't know why I have to manually zoom out though.
Why is the Android not zooming out to the width of the page when the page is loaded?
My meta tag looks like this:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
My CSS looks like this:
#media all and (max-device-width: 750px), all and (max-width: 750px) {
body {max-width:480px;}
#container {
width: 90%;
margin: 0px auto;
padding: 0px;
min-width:480px;
}
#rightnav {display:none;}
}
if you're planning to display a 480px layout on a 320px screen you obviously have to zoom, so this works exactly as specified, but the iphone "smartly" ignores some rules to display it fullscreen.
you can set the initial-scale value to 0.75 to force every device to keep that zoom level in the beginning. of course the better solution would be to have yet another media query to scale down the screen contents even more on 320px devices.
Currently I am dynamically generating 1-(N) images via php GD based on user form input, and then posting into an iframe, that displays the image.
But theres a couple of problems:
Iframes seems to be a drag when styling.
The user dont seem to be able to "rightclick->saveas" the images properly when in iframes.
So are there any better methods for doing this?
Use a fixed size div element with overflow: scroll set on it.
For example:
#container {
width: 600px;
height: 300px;
overflow-y: scroll; //vertical scrolling only
}
It behaves in the same manner as an iframe, but allows you better control of both content via javascript and styling via CSS.