{"action":"created","issue":{"url":"https://api.github.com/repos/synchronizingtheworld/testWebpackSourceMap/issues/1","repository_url":"https://api.github.com/repos/synchronizingtheworld/testWebpackSourceMap","labels_url":"https://api.github.com/repos/synchronizingtheworld/testWebpackSourceMap/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/synchronizingtheworld/testWebpackSourceMap/issues/1/comments","events_url":"https://api.github.com/repos/synchronizingtheworld/testWebpackSourceMap/issues/1/events","html_url":"https://github.com/synchronizingtheworld/testWebpackSourceMap/issues/1","id":165917572,"number":1,"title":"使用css-loader带sourceMap参数造成mui样式错误","user":{"login":"Lihuanghe","id":7598107,"avatar_url":"https://avatars.githubusercontent.com/u/7598107?v=3","gravatar_id":"","url":"https://api.github.com/users/Lihuanghe","html_url":"https://github.com/Lihuanghe","followers_url":"https://api.github.com/users/Lihuanghe/followers","following_url":"https://api.github.com/users/Lihuanghe/following{/other_user}","gists_url":"https://api.github.com/users/Lihuanghe/gists{/gist_id}","starred_url":"https://api.github.com/users/Lihuanghe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Lihuanghe/subscriptions","organizations_url":"https://api.github.com/users/Lihuanghe/orgs","repos_url":"https://api.github.com/users/Lihuanghe/repos","events_url":"https://api.github.com/users/Lihuanghe/events{/privacy}","received_events_url":"https://api.github.com/users/Lihuanghe/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-07-16T07:41:22Z","updated_at":"2016-07-16T09:24:59Z","closed_at":null,"body":"我调试你了你说的问题。但是未找到根本错误。\r\n此错误只在一种情况下会出现：满足这两个条件\r\n-  不使用` extract-text-webpack-plugin`对css样式进行抽取\r\n- 使用css-loader?sourceMap加载mui.css,带上sourceMap参数\r\n\r\n当css-loader不使用sourceMap参数时，style-loader从在html头部注入`style`标签生成样式，此时mui不对出错；\r\n\r\n当使用` extract-text-webpack-plugin`时。line标签的href对应url 文件，此时mui不对出错；\r\n\r\n当css-loader带上sourceMap参数时，style-loader从在头部注入`link`标签，其href对应的URl是个Blob对象，  `此时会出错`    。\r\n\r\n我猜测可以浏览器对`link`的处理，Blob对象和url地址可能不一样，这需要对浏览器非常熟悉的人才能知道原因。表象的原因是：link的href是Blob时，mui的样式还未加载（或者渲染）完成，mui.js的就开始初始化，获取的`mui-slider-progress-bar`的`offsetWidth`不对,造成transform : translate值计算错误。\r\n\r\n### 解决方式就是让mui.css样式完全加载完成再执行mui.js的初始化方法。\r\n比如：延时调用\r\n\r\n```javascript\r\n\r\nrequire('muicss');\r\nsetTimeout(fn(){\r\n      // mui 框架 js\r\n      window.mui = require('muijs');\r\n},0);\r\n\r\n```"},"comment":{"url":"https://api.github.com/repos/synchronizingtheworld/testWebpackSourceMap/issues/comments/233121926","html_url":"https://github.com/synchronizingtheworld/testWebpackSourceMap/issues/1#issuecomment-233121926","issue_url":"https://api.github.com/repos/synchronizingtheworld/testWebpackSourceMap/issues/1","id":233121926,"user":{"login":"Lihuanghe","id":7598107,"avatar_url":"https://avatars.githubusercontent.com/u/7598107?v=3","gravatar_id":"","url":"https://api.github.com/users/Lihuanghe","html_url":"https://github.com/Lihuanghe","followers_url":"https://api.github.com/users/Lihuanghe/followers","following_url":"https://api.github.com/users/Lihuanghe/following{/other_user}","gists_url":"https://api.github.com/users/Lihuanghe/gists{/gist_id}","starred_url":"https://api.github.com/users/Lihuanghe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Lihuanghe/subscriptions","organizations_url":"https://api.github.com/users/Lihuanghe/orgs","repos_url":"https://api.github.com/users/Lihuanghe/repos","events_url":"https://api.github.com/users/Lihuanghe/events{/privacy}","received_events_url":"https://api.github.com/users/Lihuanghe/received_events","type":"User","site_admin":false},"created_at":"2016-07-16T09:24:59Z","updated_at":"2016-07-16T09:24:59Z","body":"补充：查到一些资料：应该是chrome的一个bug，可能最新版的还未修复\r\nhttps://www.nccgroup.trust/uk/about-us/newsroom-and-events/blogs/2016/february/script-injected-css-will-no-longer-block-rendering-in-chrome/\r\nhttps://bugs.chromium.org/p/chromium/issues/detail?id=571725\r\n此现象在 firefox和IE上没有问题"}}
{"actor":{"display_login":"Lihuanghe"}}