NexT主题无法实现页面内最大化（如果是这么叫的话-_-!，内有图片实例） about hexo-tag-dplayer

[RexSkz]

The element article.post.post-type-normal has a css rule transform: translateY(0px), it'll create a stacking context, cause the inner DPlayer element use this element for positioning instead of browser window, even if its position is fixed. It's a css bug, we have no idea. The only solution is to change your blog's css code.

---

Reference:

1. https://developer.mozilla.org/en-US/docs/Web/CSS/transform (MDN)

If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains.

2. https://segmentfault.com/a/1190000002783265#articleHeader6 (A chinese article about stacking context)

3. https://www.w3.org/TR/css-transforms-1/#transform-rendering (W3C)

For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

[RexSkz]

There're four points:

1. use_motion means making elements move to exact places when page is loaded, which is a feature in NexT theme.
2. NexT use transform to accelerate the animation, which is the method that most people will use. Without transform (for instance, use relative and top), it may cause some performance issue.
3. Authors can't predict whether a user wants a full-page player inside the article (in most cases full-screen is enough for videos in article).
4. Based on W3C, transform is surely conflict with inner element's full-page style.

So they might not make any changes even if you make an issue. The best way is changing the code yourself. I prefer your second idea, because NexT theme has too many element-moves when page is loaded, it's worth to reduce some of them, keeping fade-in effect is enough.

[Myer921]

@reuixiy 手机测试未发现，明天试试电脑

[Myer921]

好的，我收回上句话，明天开电脑看看吧 @dixyes
日常召唤

[reuixiy]

@Myer921 谢谢:innocent:

[reuixiy]

@RexSkz Thanks a lot, I'll try it.:thumbsup:

[reuixiy]

Okay, I think I've got it! To solve this problem, I've found two solutions:

1. Add the following code into ~/blog/themes/next/source/css/_custom/custom.styl:

.post.post-type-normal {
    transform: inherit !important;
}

2. Modify true to false in ~/blog/themes/next/_config.yml:

# Motion
use_motion: false

However, none of them is perfect. Could you give me a better solution? Or I'd better set up a new issue in hexo-theme-next.

Thanks again. @RexSkz

[reuixiy]

Okay! Thank you so much! @RexSkz