Extract of Bootstrap 3 CSS crashing IE9 - css

The following page was constantly crashing for me in IE9 on Windows 7:
http://www.studyzone.tv/test1.html
After much testing around, it turns out the line-height line in the Bootstrap 3 CSS File was causing the crash...or at least conflicting with JWPlayer somehow, and between them, causing the crash!
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429; /* THIS IS THE LINE THAT CUASES THE ERROR*/
color: #333333;
background-color: #ffffff;
}
I have duplicated the CSS file and commented the line out and it fixes the problem, as can be seen in this link:
http://www.studyzone.tv/test2.html
I suppose I have two questions:
Why is this line causing the crash? Have I really found the problem, or do I have a conflict somewhere else?
How can I fix the issue without commenting out the original CSS file which is obviously bad practice?

It most likely has to do with a clash in HTML5 mode in IE between our HTML5 player and Bootstrap.
You are setting primary to flash inside of the playlist block, so it is never taking effect.
The set up should be:
<script type="text/javascript">
jwplayer("jwplayer").setup({
playlist: [{
image: "http://www.studyzone.tv/media/lesson002/lesson002-still.jpg",
sources: [
{ file: "http://www.studyzone.tv/media/lesson002/lesson002-lq.mp4", label: "360p" },
{ file: "http://www.studyzone.tv/media/lesson002/lesson002-hq.mp4", label: "720p HD" }
],
title: "Play video"
}],
width: "700",
aspectratio: "16:9",
primary: "flash"
});
</script>
This should solve the issue and you won't have to comment anything out either.

Related

Smart Slider 3 - Add custom icon package? (Joomla3)

I'am trying to add a custom icon set to a joomla3 cms webpage, which uses the Nextend Smart Slider 3 Pro (V: 3.3.27-pro-r6010). On default the SmartSlider-backend only shows the built-in icon sets (Font Awesome 4, Icoomon, Linear, Material, Typicons).
What I've done so far:
I've already combined all custom-designed icons to an icon font (via IcoMoon App) and added al files locally like the default icons (./media/n2/n/icons/customicon/files/...).
Also added a manifest.json and readme.txt in the /customicon-folder (using code from /fontawesome as a template & customising them):
{
"id": "cicn",
"label": "CustomIcon",
"class": "cicn",
"isLigature": 0,
"prefix": "cicn-",
"data": {
"chefron_up": {
"name": "chefron_up",
"kw": "chefron_up, arrow"
}
}
}
Furthermore is added a customicon.css within ./media/nextend/customicon/... like:
#font-face {
font-family: 'customicon';
src: url(/webpage/media/n2/n/icons/customicon/files/customicon.eot?b8n2oe);
src: url(/webpage/media/n2/n/icons/customicon/files/hicustomicon.eot?b8n2oe#iefix) format('embedded-opentype'),
url(/hwebpage/media/n2/n/icons/customicon/files/customicon.ttf?b8n2oe) format('truetype'),
url(/webpage/media/n2/n/icons/customicon/files/customicon.woff?b8n2oe) format('woff'),
url(/webpage/media/n2/n/icons/customicon/files/customicon.svg?b8n2oe#hicustomicon) format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div .n2i.cicn {
display: inline-block;
font: 1em/1 hicustomicon;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.cicn-chefron_up:before {
content: "\e900";
}
And there I start struggeling:
Right now in my smartslider-backend, I can see the customicon-title in my icon-list & there is the 'chefron_up'-title to choose (also visible in debugger), but the image/icon won't visually show.
Also I'am getting an warning message: Warning: filemtime(): stat failed for /Applications/XAMPP/xamppfiles/htdocs/webpage/media/n2/n/icons/customicon/files/customicon.min.css in /Applications/XAMPP/xamppfiles/htdocs/webpage/libraries/nextend2/nextend/library/libraries/assets/cache.php on line 66, which states:
protected function makeFileHash($file) {
return $file . filemtime($file);
}
I can't wrap arround my head, how to add the icon(s) to the backend/frontend of the Smart Slider Pro, to display them. Digged through the code (especially ./media/n2/n/dist/...) & also saw, that there is a icon.css.manifest within the /nextend-folder for every default icon-font, which includes a hash.
I'am personally a ux-designer and not a developer, so Iam quite stuck on this. Maybe somebody can help me, to get this working or can tell me, if there is an easier way to add an custom icon set to the SmartSlider3.
Appreciate any help.
Cheers.

Module parse error when trying to load background image in a css element

It might be relevant to note that I'm using Next.js, which was already being finicky with css files (having to npm install #zeit/next-css just to be able to import css files into javascript pages).
So there's a specific Panel element from a third party API that doesn't have an attribute for setting background image. It should be fine, though, because they provide css mappings for all their elements, right?...
Apparently not, because when I add background-image: url('img.png'); (the css and picture are in the same directory) to
.ais-Panel-header {
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
font-size: 5rem;
font-weight: bold;
text-align: center;
text-transform: uppercase;
border-bottom: 1px solid #f1b68a; }
I get the following error
The panel works with any background-color. Anyway, the problem isn't element-specific, I've tried image filepaths with other elements like the body background and run into the same error. Unfortunately, since this time I'm dealing with a React component, I can't just weasel a <body background="path"> in.
Does anyone have any experience with this or any clue as to why this is happening and potential workarounds?
next-css don't handle image loading
const withCSS = require("#zeit/next-css");
module.exports = withCSS({
webpack: config => {
config.module.rules.push({
test: /\.(png|jpg)$/,
use: {
loader: "url-loader"
}
});
return config;
}
});

CSS font-variation-settings not working

I'm currently experimenting with variable fonts. My first test was to experiment with the font-variation-settings directive, but it seems that is not working. Both on Codepen:
https://codepen.io/DailyMatters/pen/LrBvmz
This is my current CSS (it seems like the font is being loaded correctly from dropbox):
#font-face {
font-family: 'SourceSans';
src: url('https://www.dropbox.com/s/fmonith639cs931/SourceSansVariable-Roman.ttf') format('truetype');
}
html {
font-family: 'SourceSans', sans-serif;
}
p {
font-variation-settings: "wght" 999, "wdth" 125;
}
But also on Chrome.
As much as I change the "wght" axis, nothing happens. I did same tests with this same font using #font-face, and it worked on Chrome. Any reason this is not working with font-variation-settings?

Is there a way to run sass on a scss file without parsing imports?

I am building up a workflow in gulp to build and minify my SCSS and JS - usual stuff.
I'm using Eric Meyer's css reset as follows:
#import 'reset.scss';
h1 {
font-size: 4em;
font-family: "Oswald", Verdana, sans-serif;
font-weight: 400;
text-align: center;
margin: 20px 0 40px 0;
}
section h1 {
font-size: 2em;
font-family: "Oswald", Verdana, sans-serif;
font-weight: 300;
margin: 40px 0 15px 0;
}
It's in its own file, imported.
Then I have a gulp task:
gulp.task('buildScss', () => {
return sass(paths.style.src+path.sep+'*.scss', { style: 'expanded' })
.pipe(gulp.dest(paths.style.bin))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest(paths.style.bin));
});
This runs sass on the CSS files, dumps them to a bin/style folder, changes the name to [name].min.css, minifies and saves.
The problem is that a) the sass process imports the reset css files and includes it in the main compiled file and b) when the minifier runs it doesn't just strip whitespace - it plays with the order of things and probably some other clever stuff. This affects how the CSS is actually processed and in this case the font-family from the reset (inherit) is now included after the main definition, resetting it after it has been styled.
h1,section h1{font-family:Oswald,Verdana,sans-serif}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}h1{font-size:4em;font-weight:400;text-align:center;margin:20px 0 40px}section h1{font-size:2em;font-weight:300;margin:40px 0 15px}
I figure one option would be if I could leave the #import in place and not follow it when running sass but I can't find an option to do that.
I'd like to not rely 100% on gulp to construct the files (so I could still manually run sass on them) and to leave some reference in the file to the reset for clarity.
I also realise that I can remove the font-family definition in section h1 as it is inherited and this solves the problem in this particular case. But it's easy to accidentally get into that situation again and it would be frustrating to constantly be debugging around it.
Any thoughts, ideas, solutions? Thanks!
Thanks to #Nit and #jeradg - the problem was in the minifier settings. I don't know if it should be doing what it's doing (bug submitted - https://github.com/jakubpawlowicz/clean-css/issues/681) but either way it can be stopped by setting a switch in gulp:
gulp.task('buildScss', () => {
return sass(paths.style.src+path.sep+'*.scss', { style: 'expanded' })
.pipe(gulp.dest(paths.style.bin))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss({restructuring: false}))
.pipe(gulp.dest(paths.style.bin))
.pipe(livereload());
});
The change would be the restructuring parameter in this line:
.pipe(minifycss({restructuring: false}))

PhantomJS PDF Capture Doesn't Pick Up Font Server Fonts

I'm using PhantomJS to turn an html page into PDF. This page uses fonts from cloud.typography.com. Now the html page itself is fine, and if I manually print it to a PDF, that too is fine. However, when I use PhantomJS to turn it to a PDF, the server fonts do not show up.
I researched this issue, and while I could find general issues involving fonts, I could find nothing on this specific case. The closest thing I could find was a bug in which PhantomJS would use the fallback font even if the primary one was available, but removing the fallback font didn't fix the issue for me.
Is this a known bug? Did I do something wrong? Do you know of any work-arounds?
Here's the (generic) html to PDF rendering script I'm using. I'm parametizing the page on the command line:
var page = require('webpage').create(),
args = require('system').args,
if ( args[2].split('.').pop() == 'pdf' ) {
page.viewportSize = { width:1920, height:1080 };
page.paperSize = {
width: '8.5in',
height: '11in',
};
}
page.open(args[1], render);
function render() {
page.render(args[2]);
phantom.exit();
}
Here's a relevant html snippet that points to the font server and the style sheet:
<link rel="stylesheet" type="text/css" href="print.css">
<link rel="stylesheet" type="text/css" href="//cloud.typography.com/7787052/625786/css/fonts.css" />
And here's a relevant section from print.css that references the fonts:
body {
font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
font-weight: 400;
font-style: normal;
margin: 0;
padding: 0;
}

Resources