search

MoePlayer / hexo-tag-dplayer

Embed dplayer in Hexo posts/pages
MIT License
207 stars 30 forks source link

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

Closed reuixiy closed 6 years ago

reuixiy commented 6 years ago

描述

点击图中的按钮，然后…… 纯小白求解决方法……蟹蟹大佬们:grin:

selection_002

实例

点击这里啦

主题

NexT

插件版本

"hexo-tag-dplayer": "^0.2.0"
Myer921 commented 6 years ago

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

Myer921 commented 6 years ago

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

RexSkz commented 6 years ago

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.

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

  2. 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.

reuixiy commented 6 years ago

@Myer921 谢谢:innocent:

reuixiy commented 6 years ago

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

reuixiy commented 6 years ago

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;
}
  1. 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

RexSkz commented 6 years ago

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.

reuixiy commented 6 years ago

Okay! Thank you so much! @RexSkz