Something caused this CSS to break - javascript

I have a static site based off a theme. The CSS has not been touched but something caused it to break recently. I was a bit confused since I hadn't made any changes so I checked the example site and it's broken there as well. I checked with the author, no new changes but they also noticed it's broken for them now.
So the issue. On Safari, IE, Chrome, and Edge there is a weird header weird "pop-in(?)" upon page load. All elements are shifted down immediately. Firefox operates properly.
It's easiest to see on this page https://mmistakes.github.io/so-simple-theme/theme-setup/, but effects all pages in the theme.
I'm not a CSS wizard but after troubleshooting for a day I found it may be related to this CSS selector? I could be completely wrong.
#site-nav {
display: none;
z-index: 5
}
Second question (less important) is I'm wondering what could cause something to break after the fact. I'm assuming one of the JavaScript libraries linked in?
Thanks much!

You are correct, the reason your content, say "pops-in" or simply shifts down abruptly is because the content just appears when page is loaded.
To fix this initialize your CSS to start like:
#site-nav {
height: 0;
transition: height .2s, max-height 200ms;
overflow: hidden;
}
Then in your #media for 48em have your css do this:
#site-nav.closed {
height: 5em;
}
This will ensure your content actually slides in and no abrupt behavior exists anywhere.

Related

Scrollbar not visible for certain users

We have a web app which has a fixed side bar used for navigation. The app is built of this template
We are facing a very strange problem where the scroll bar disappears from the html and the page gets cut off. The interesting thing is the scrollbar shows up for 99% of our users but not for the remaining 1%.
We tried everything we could think of including setting the body and html to 100% height and automatic overflow, we also asked those 1% of our users to disable all their browser extensions, clear their cache but nothing helped.
Those 1% still have scrolling issues and their pages are cut off.
What can cause a scrollbar to disappear for some users but not others?
Without actually seeing the page, the only thing I can think of is making sure the scrollbar always shows with overflow content like so.
html {
overflow-y: scroll;
}
Some additional research shows that sometimes Firefox doesn't play nice, so you can try this if that's the case.
html {
overflow: -moz-scrollbars-vertical;
overflow: scroll;
}
Source: https://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars/

Duplicate HTML or move elements with JS for responsive site

There's site I'm working at and design for tablet/mobile devices require me to move elements (from left sidebar to right, change order, etc.). These elements include simple text and images (pretty small, logos).
My question is, what would be the best way to go about this? So far I have only two ways.
1) Duplicate HTML content and then show/hide with CSS media queries. My concern here is that it's not SEO friendly, and content / images still gets rendered, even if hidden. Could that leave me with a performance problem?
2) Move elements using JS. My concern here is that people with JS disabled will still see the content in old places, and maybe this JS solution could impact performance even more?
Would really appreciate some input on best practices in a situation like this.
Here's what I'm trying to achieve:
The questions are contradicting a bit :)
First of all, it's 2016 in the WEB, if you are speaking about having responsive layout, support of mobiles, tablets, desktops - they will have JavaScript support, so you shouldn't worry. - it is answer on your question number #2. The percentage of people not having JS is extremely low, it's below <1%.
CSS media queries are enough to make good responsiveness. Sometimes you need to add helper methods with JS to manipulate DOM and to make it even more advanced.
You may check how they do responsiveness with classes in Twitter Bootstrap.
Sometimes content will be duplicated in HTML, but as soon as it's not visible simultaneously on the screen because of visibility rules from CSS media queries - it will not do any harm on SEO.
There's the way to over-complicate things a bit, RESS: Responsive Web Design + Server-Side Components, and to serve different HTML layouts depending on the detected User Agent.
You mentioned that you were reluctant to use display: hidden because something about them being rendered. If I'm understanding correctly, then you can use display: none on the right side for example. Then in your media queries, you can set content on the left to display: none and content on the right to display: initial. That should work just fine, if I understood you correctly. Then no space will be allocated for the hidden elements.
For example:
.leftDiv {
display: initial;
}
.rightDiv {
display: none;
}
#media screen only and (max-width: 1000px) {
.leftDiv {
display: none;
}
.rightDiv {
display: initial;
}

Internet explorer re-sizing elements as page is updated

My problem is an Internet Explorer issue. I have an element, basically just a block, with the css:
md-card{
min-width: 80%;
background-color: #fff;
}
And this element is full of data elements consisting of an icon and text.
Each one is either a file or folder, and clicking a folder just navigates to that folder's contents.
These elements are using data binding and are dynamically updated when you click a folder (so it removes the current contents and replaces the data with the opened folders new contents) and for some reason this causes a problem in IE
The md-card element despite having min-width set to 80% will sometimes squash down to like an inch big on the screen when a folder is opened. Sometimes this happens only for an instant, and it resizes, and sometimes it sticks. But resizing the page will cause it to resize back to the intentded width.
I was thinking it was some weird interaction between angularjs and IE but I'm wondering if this is an issue anyone has encountered or and ideas on why this is happening.
Edit: On further inspection it seems to involve the min-width: 80% attribute.
Changing it to min-width: 600pxeliminates the problem.
The problem with Internet Explorer is always bugging but I figured out the solution please add this line to md-card CSS sheet . As you mentioned that it is basically a block , consider this .
md-card{
display: block ; /*Add this line*/
min-width: 80%;
background-color: #fff;
}
Internet Explorer is not as intelligent as chrome or Firefox , so the default is always display:inline ;
Therefore the layout problem occurs .

Scrollbar doesn't show up in Chrome on OS X

So I have a site built using the Kentico CMS. On page load, sometimes the scroll bars will not show up in Chrome on Mac. They do show up in Safari, reliably. I previously had this issue with Safari, and added
html {
overflow-y: scroll;
}
to my css, and that seemed to fix it. It's not working for Chrome, however.
I did notice that if I open up the dev console and then close it, it gains a scroll bar. If I change the CSS of an element to be width 99%, rather than 100%, it gains a scroll bar. However, this only works if I change the CSS that targets that element. If I change it just for that element (either with javascript or by modifying the element.style through the console), it does not gain a scroll bar.
There are no JavaScript errors upon opening the console.
My thought was to try to change the CSS itself with JavaScript, but I'm not positive how to do that.
Does anyone have any other ideas? Or how I could accomplish my plan?
I unfortunately can't reduce the problem any further. It seems to be the interaction of the whole site, including Kentico, so it doesn't seem possible to get a jsfiddle or anything.
I have solved the issue. This was caused by the following css:
html {
overflow-y: inherit;
}
I do not know why this caused the problem. I commented out this line, and the issue was resolved.

Unable to set marginTop style with script using IE8, but works in grown-up people browsers

I'm attempting to animate the slide-out of a menu with script. To do this, I need to animate the marginTop property of an element and increment it from -30px to 0px.
However, in IE8, the animation simply does nothing. I've traced this down to the fact that setting marginTop in script seems to have no effect. In Chrome and Firefox, this works fine.
Here's an example that will work with Chrome/Firefox, but not IE:
http://jsfiddle.net/rm58T/2/
Is this an IE bug, and if so, are there any workarounds for this behavior? Thanks!
Update:
Here's some screen shots of the bug.
In Chrome, my Fiddle looks like this (You can see the "Name of new menu" text, since we changed the margin with script)
In IE8/Vista, it looks like this. I can confirm in Developer Tools that topMargin is actually 0px as expected, however the elements were not re-drawn:
Another Update:
This bug repros (at least for me) on IE8 running on Windows 7, and also IE8 running on Windows 2008 Server. It does NOT repro for me on IE7 running on WinXP. I do not have any IE9 machines to test it.
Yet Another Update:
I found one potential work-around. If I set p.newmenu to position: absolute; instead of position: relative; then it works. However, in my case I'm hosting this entire thing in a popup menu and need this control to push out the bottom of the modal dialog, so absolutely positioning it is not an option. However, perhaps this knowledge can help in finding a workable solution. An example of this work around can be found here.
Would You Believe Another Update?:
I did find a workaround for now. If I use top: -30px; instead of a negative top margin, then everything works. top behaves a bit differently than a margin, though, and makes the UI not look quite as nice. In particular, when you use top: -30px, then you'll have 30px of whitespace under your element since relative positioning doesn't affect other page flow.
I'd greatly like to figure out why I can't use a negative top margin on IE like I can with other browsers, so I'm still hoping someone can provide an answer that will provide all the benefits of a negative top margin but also work with IE8.
The trigger for this behaviour is how IE8 handles the fieldset element.
You can work around it by setting the display for fieldset to inline (or inline-block).
div.modal.addmenu fieldset {
display: inline;
}
This isn't exactly a bug; it is just based on the fact that (to keep up in performance comparisons) IE was built since version 5.5 with a minimized preset of static definitions;
That means: Instead of spending any Element the whole and correct definition (depending on which god of specifications you hail out for ...) for the type it is, IE is using less.
TODO:
Give back what should be credited for acting as a top-model paragraph relatively positioned; DISPLAY it accordingly to its talents; any super-paragraph should do the catwalk inline, even if it is a block-head, you might try using sugar and whiplashes to remember your nasty P of its origin as a inline-block. It's a frenzy P, give some respect to its talents…
DOJO:
In fact, you as a rune-reading script-javalchemist be the one who has to have to take control over the brew the browser serves. Or it makes boom, silently ...
GODO:
Necessary things to do if you want to use negative-margins in browsers which don't play legally:
remember the elements you want to use of their display's origin; don't believe in browser-vendors that they would have done that already for you
IF you are just out for IE 7+ use display:inline-block;
IF you want to get negative-margins to effect on all notable browsers, but can forget about NS4, then use display:inline; or display:block;
Do not forget to build the foundation for your negative-margins: set position:relative;
MOJO:
If IE-Betas and older ones like 5.5 or 6 are in your point of interest, you have to ensure that your relative-positioned negative-margin paragraph has values for width and height; Depending on what you are trying to achieve, sometimes a height:auto; helps out.

Categories